<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Use of non-graphical descriptions</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
      span.highlight {
        font-weight: bold;
        color: red;
      }
    </style>
  </head>
  <body>
    <h2>Use of non-graphical descriptions</h2>
    <p>To aid users with screen readers, disabled images, or other non-graphical web browsers, I included text equivalent descriptions of all graphical elements contained in my web page. This includes image, table, and list elements.</p>
    
    <h4>The table from my assignments pages uses the <span class="highlight">"summary"</span> attribute to describe the contents.</h4>
    <pre>
      &lt;table border="1" <span class="highlight">summary="A list of all the assignments for CSCI 4230, their description, and a link to my solution."</span>&gt;
      
        <span style="font-weight: bold;">..table contents omitted for this example..</span>
        
      &lt;/table&gt;
    </pre>
    
    <h4>The <span class="highlight">"alt"</span> attribute provides descriptions for all img elements.</h4>
    <pre>
      &lt;img src="../images/index_css.jpg" <span class="highlight">alt="A screen capture of the home page with CSS styling."</span>  style="border: solid" /&gt;
    </pre>
    
    <h4>The <span class="highlight">"title"</span> attribute describes an unordered list, like navigational links.</h4>
    <pre>
          &lt;ul <span class="highlight">title="Links to navigate around the web site."</span>&gt;
            &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="index_longhorn.html"&gt;Longhorn Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="resume.html"&gt;Resume&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="assignments.html"&gt;Assignments&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="usability.html"&gt;My Design&lt;/a&gt;&lt;/li&gt;                    
          &lt;/ul&gt;
    </pre>
    <p>
      <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.w3.org/Icons/valid-xhtml10"
             alt="Valid XHTML 1.0 Strict" height="31" width="88"/>
      </a>
    </p>
  </body>
</html>
